<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">

    <div v-if="!isLogin">
        <h1>欢迎访问学生管理系统</h1>
        <div>
            <input v-model="phone" placeholder="请输入手机号"/>
            <input v-model="password" placeholder="请输入密码"/>
            <button @click="login()">登录</button>
        </div>
    </div>
    <div v-if="isLogin">
        <div>
            <input v-model="name" placeholder="请输入学生姓名"/>
            <input v-model="age" placeholder="请输入学生年龄"/>
            <input v-model="no" type="number" placeholder="请输入学生学号"/>
            <button @click="insert()">插入学生信息</button>
        </div>
        <div>
            <input placeholder="请输入学生姓名" v-model="searchStr"/>
            <input placeholder="请输入学生年龄" v-model="searchAge"/>
            <input placeholder="请输入学生学号" v-model="searchNo"/>
            <button @click="search()">查询</button>
        </div>

        <div v-for="item in list" style="margin-top: 10px;display: flex">
            <div style="width: 100px;">
                <img :src="item.avatar" style="width: 50px;height: 50px"
                     @click="choose(item.id)"/>
                <input type="file" multiple accept="image/jpeg,image/png" :data-id="item.id"
                       style="visibility: hidden" :id="item.id" @change="handleChoose">
            </div>
            {{item.name}}-{{item.age}}-{{item.no}}
            <button @click="del(item.id)" style="height: 30px">删除</button>
        </div>
    </div>


</div>
<script>
    new Vue({
        el: '#app',
        data: {
            isLogin: true,//是否显示登录页面
            phone: '',//保存手机号
            password: "",//保存输入框的密码
            name: "",//名称
            age: "",//年龄
            no: ""//学号
            ,
            searchStr: "",
            searchAge: "",
            searchNo: "",
            list: [],
            stuPost: {}
        },
        // 页面刷新会调用的函数
        mounted() {
            this.search()
        },
        methods: {
            //登录方法
            login() {
                axios
                    .post('http://localhost:8082/t-user/login',
                        {phoneNumber: this.phone, password: this.password}
                    )
                    .then(response => {//返回的结果
                        debugger
                        if(response.data.code==1)   {
                            alert(response.data.msg)
                        }else {
                            //显示正常页面
                            this.isLogin = true;
                            localStorage.setItem("token", response.data.data)//保存token在缓存中
                            this.search()
                        }

                    })
            },
            del(id) {
                axios.post("http://localhost:8082/plus/deleteStu?id=" + id,{},
                    {
                        headers:{"token":localStorage.getItem("token")}//从缓存中拿到token放到请求头
                    }).then(res => {
                    if(res.data.code==1){
                        // 删除成功
                        alert(res.data.msg)
                    }else{
                        alert("删除成功")
                        this.search()
                    }
                })
            },
            insert() {
                axios.post("http://localhost:8082/plus/addStu?name=" +
                    this.name + "&age=" + this.age +
                    "&no=" + this.no,{},
                    {
                        headers:{"token":localStorage.getItem("token")}//从缓存中拿到token放到请求头
                    }
                ).then(res => {//返回值处理，res就是返回值
                    if(res.data.code==1){
                        // 删除成功
                        alert(res.data.msg)
                    }else{
                        alert("插入成功")
                        this.search()
                    }
                })
            },
            //搜索函数
            search() {

                if (this.searchAge == "") {
                    this.searchAge = 0
                }
                axios.get("http://localhost:8082/plus/getList?name="
                    + this.searchStr + "&no=" + this.searchNo + "&age=" + this.searchAge,
                    {
                        headers:{"token":localStorage.getItem("token")}//从缓存中拿到token放到请求头
                    }
                ).then(res => {
                    if(res.data.code==1){
                        alert(res.data.msg)
                        this.isLogin = false
                    }else{
                        this.list = res.data.data
                    }

                })
            },
            choose(id) {

                let input = document.getElementById(id);
                input.click()//模拟点击事件
            },
            handleChoose(e) {

                let file = e.target.files.item(0);//拿到选择的图片
                let data = new FormData();
                data.append("file", file);
                data.append("id", e.target.dataset.id)
                axios
                    .post('http://localhost:8082/plus/uploadAvatar', data, {
                        headers:{"token":localStorage.getItem("token")}//从缓存中拿到token放到请求头
                    })
                    .then(res => {
                        if(res.data.code==1){
                            alert(res.data.msg)
                        }else{
                            //更新完成后刷新列表
                            this.search()
                        }

                    })
            }
        }
    })
</script>
</body>
</html>
